<template>
	<view class="container">
		<h5>{{battleName}}</h5>
		<view class="person">
			<view class="lt">
				<view class="man" v-for="friend in friendUnitList">
					<text>{{friend.unitName}}</text>
					<view class="hp">HP:{{friend.hp}}/{{friend.maxHp}}</view>
					<view class="mp">MP:{{friend.mp}}/{{friend.maxMp}}</view>
				</view>
			</view>
			<view class="rt">
				<view class="man" v-for="enemy in enemyUnitList">
					<text :class="[{'dead':enemy.hp === 0}]">{{enemy.unitName}}</text>
					<view class="hp">HP:{{enemy.hp}}/{{enemy.maxHp}}</view>
					<view class="mp">MP:{{enemy.mp}}/{{enemy.maxMp}}</view>
				</view>
			</view>
		</view>
		<view class="desc" ref="scrollContainer">
			<text v-for="text in textList">
				{{text.turn}} {{text.msg}}
			</text>
		</view>
	</view>
</template>

<script>
	import {
		getParamsRequestPost
	} from '../../utils/getApi.js'
	export default {
		data() {
			return {
				zoneList: [],
				textList: [],
				battleRecord: [],
				tableContentData: {},
				battleName: '',
				viewInterval: 1000,
				battleInterval: 10000,
				bossMode: false,
				intervalId: null,
			}
		},
		onShow(options) {
			this.initBattleList()
		},
		destroyed() {
			clearInterval(this.intervalId);
			this.intervalId = null;
		},
		methods: {
			initBattleList() {
				let url;
				const zoneId = this.$route.query.zone;
				const battleType = this.$route.query.battleType;
				const that = this;
				if (parseInt(battleType) == 1) {
					url = "zone/userZone/bossBattle"
				} else {
					url = "zone/userZone/battle"
				}
				// 获取数据
				uni.getStorage({
					key: 'accessToken',
					success: function(res) {
						getParamsRequestPost(url, {
								session: {
									sid: res.data
								},
								zone: {
									id: zoneId
								}
							}, true)
							.then(result => {
								that.tableContentData = result;
								that.battleName = result.data.battleName
								that.friendUnitList = result.data.friendUnitList;
								that.enemyUnitList = result.data.enemyUnitList;
								that.friendUnitList = result.data.friendUnitList;
								that.battleRecord = result.data.battleRecord;
								that.battleInterval = that.battleRecord.length * 200;
								console.log('battleInterval', that.battleInterval);
								that.showBattleRecordList(that.battleRecord)
							})
							.catch(result => {
								console.log(result);
							})
					},
					fail: function(error) {
						console.log('获取数据失败：', error);
					}
				});
			},
			// 播放战斗文本
			showBattleRecordList(battleRecordList) {
				const that = this;
				let battleCursor = 0;
				this.textList = []
				this.intervalId = setInterval(() => {
					if (battleCursor < battleRecordList.length) {
						this.showBattleRecord(battleRecordList[battleCursor++]);
					} else {
						clearInterval(this.intervalId);
						this.intervalId = null;
						setTimeout(() => {
							that.initBattleList();
						}, that.battleInterval);
					}
				}, that.viewInterval);
			},
			showBattleRecord(battleRecord) {
				const that = this;
				if (battleRecord.unitStatus) {
					battleRecord.unitStatus.forEach((unit) => {
						if (unit.uid === 'f1') {
							that.friendUnitList = [unit]
						} else {
							if (unit.uid === 'e1') {
								that.enemyUnitList[0] = unit
							}
							if (unit.uid === 'e2') {
								that.enemyUnitList[1] = unit
							}
							if (unit.uid === 'e3') {
								that.enemyUnitList[2] = unit
							}
							if (unit.uid === 'e4') {
								that.enemyUnitList[3] = unit
							}
						}
					});
				}
				this.appendBattleRecord(battleRecord);
			},
			appendBattleRecord(battleRecord) {
				this.textList.unshift(battleRecord)
			},
		},
	}
</script>

<style lang='scss'>
	.container {
		width: 100%;
		display: block;
		margin-top: 20rpx;
	}

	.mui-table-view-cell {
		width: 100%;
		height: 130rpx;
		display: block;
		padding: 15rpx 25rpx;
		border-bottom: 1px solid #ccc;
	}

	ul,
	li {
		margin: 0%;
		padding: 0;
		list-style: none;
	}

	h5 {
		width: 100%;
		height: 50rpx;
		font-size: 45rpx;
		text-align: center;
		padding-top: 50rpx;
	}

	.person {
		width: 96%;
		display: block;
		overflow: hidden;
		margin: 0 auto;
		margin-top: 40rpx;

		.lt,
		.rt {
			width: 50%;
			float: left;
			text-align: center;

			.man {
				display: block;
				margin: 0 auto;
				margin-bottom: 30rpx;
			}

			text {
				display: block;
				margin: 0 auto;
				font-size: 1.2rem;
				margin-bottom: 10rpx;
			}

			.dead {
				text-decoration: line-through;
			}

			.hp {
				color: red;
			}

			.mp {
				color: blue;
			}
		}
	}

	.desc {
		width: 100%;
		font-size: 30rpx;
		text-align: center;
		margin-top: 30rpx;
		height: 40%;
		max-height: 300rpx;
		overflow-y: scroll;
		display: block;

		text {
			width: 100%;
			display: block;
			overflow: hidden;
			margin: 0 auto;
			text-align: center;
			margin-bottom: 20rpx;
			color: #333;
		}
	}
</style>